<script setup lang="ts">
import { ref } from "vue";
import { useSlotManagementStore } from '@/store/slot_mangement';
import assign_slot from '@/hooks/slot_management/slot_upkeep'
const SlotManagementStore = useSlotManagementStore();
let screenHeight = ref(window.innerHeight - 260);
window.addEventListener('resize', function () {
    screenHeight.value = window.innerHeight - 260;
});

const {
    dialog1,
    dialog2,
    loctionadd_data,
    rules,
    rules1,
    getloction,
    handdaddLocation,
    handupdateLocation,
    hook_locationID
} = assign_slot()

// 打开新增抽屉
function openAddDrawer() {
    loctionadd_data.LocationID = "";
    loctionadd_data.MaxPallets = "";
    loctionadd_data.Note = "";
    dialog1.value = true;
}

// 打开修改抽屉
function openUpdateDrawer(row: any) {
    loctionadd_data.LocationID = row.LocationID;
    loctionadd_data.MaxPallets = row.MaxPallets;
    loctionadd_data.Note = row.Note;
    dialog2.value = true;
}

// 表格行样式
interface Locationtable {
    RemCap: number
}

const tableRowClassName = ({
    row,
}: {
    row: Locationtable,
}) => {
    if (row.RemCap <=0) {
        return 'warning-row'
    }
    return ''
}

// 新增货位
let formRef: any = ref() // 新增抽屉表单对象
async function addlocation() {
    await formRef.value.validate();
    handdaddLocation();
}
// 修改货位
let updateformRef: any = ref() // 新增抽屉表单对象
async function updatelocation() {
    await updateformRef.value.validate();
    handupdateLocation();
}
</script>

<template>
      <el-card>
        <el-form @submit.native.prevent class="form" :inline="true">
        <el-form-item>
                <el-button type="primary" @click="getloction"  v-has="`btn_signupkeep_refresh`"
                    style="margin-left: 15px;">刷新</el-button>
            </el-form-item>
            <el-form-item>
                <el-input  v-model="hook_locationID" placeholder="请输入要查询的货位" style="width: 700px;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" v-has="`btn_signupkeep_add`" @click="openAddDrawer" :disabled="SlotManagementStore.locationtableData_pinia1.length == 0"
                    style="margin-left: 15px;">新增</el-button>
            </el-form-item>
        </el-form>
    </el-card>

    <el-card>
        <el-scrollbar :height="screenHeight"> <!-- 菜单滚动条 -->
            <el-table :data="SlotManagementStore.locationtableData_pinia1" :height="screenHeight" style="width: 100%" :row-class-name="tableRowClassName">
                <el-table-column prop="LocationID" label="货位"></el-table-column>
                <el-table-column prop="MaxPallets" label="最大容量"></el-table-column>
                <el-table-column prop="RemCap" label="剩余容量"></el-table-column>
                <el-table-column prop="Note" label="备注"></el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button size="small" type="warning" @click="openUpdateDrawer(scope.row)" v-has="`btn_signupkeep_update`">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-scrollbar>
    </el-card>
    <!-- 抽屉  新增 -->
    <el-drawer ref="adddrawerRef" v-model="dialog1" title="新增货位" size="40%">
        <el-form ref="formRef" :model="loctionadd_data" :rules="rules" label-width="80px">
            <el-form-item label="货位" prop="LocationID">
                <el-input v-model="loctionadd_data.LocationID" placeholder="请输入货位"></el-input>
            </el-form-item>
            <el-form-item label="最大容量" prop="MaxPallets">
                <el-input v-model="loctionadd_data.MaxPallets" placeholder="请输入最大容量"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="loctionadd_data.Note" placeholder="请输入备注"></el-input>
            </el-form-item>
            <el-form-item>
                <el-popconfirm width="220" confirm-button-text="OK" cancel-button-text="No, Thanks" icon="InfoFilled"
                    icon-color="#626AEF" title="是否确认新增该货位?" @confirm="addlocation">
                    <template #reference>
                        <el-button type="primary">提交</el-button>
                    </template>
                </el-popconfirm>

                <el-button type="danger" @click="dialog1 = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>

    <!-- 抽屉  修改 -->
    <el-drawer ref="updatedrawerRef" v-model="dialog2" title="修改货位" size="40%">
        <el-form ref="updateformRef" :model="loctionadd_data" :rules="rules1" label-width="80px">
            <el-form-item label="货位" prop="LocationID">
                <el-input v-model="loctionadd_data.LocationID" disabled placeholder="请输入货位"></el-input>
            </el-form-item>
            <el-form-item label="最大容量" prop="MaxPallets">
                <el-input v-model="loctionadd_data.MaxPallets" placeholder="请输入最大容量"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input  v-model="loctionadd_data.Note" placeholder="请输入备注"></el-input>
            </el-form-item>
            <el-form-item>
                <el-popconfirm width="220" confirm-button-text="OK" cancel-button-text="No, Thanks" icon="InfoFilled"
                    icon-color="#626AEF" title="是否确认修改该货位?" @confirm="updatelocation">
                    <template #reference>
                        <el-button type="primary">提交</el-button>
                    </template>
                </el-popconfirm>

                <el-button type="danger" @click="dialog2 = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>
</template>

<style lang="css" scoped>
::v-deep .el-table .warning-row {
    --el-table-tr-bg-color: #ea4c8973;
}
</style>